<template>
  <el-dialog title="储值卡查询" :close-on-click-modal="false" :visible.sync="visible" append-to-body center>
    <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
    <div style="margin-bottom: 15px;">
    <el-form label-width="80px">
      <div v-if="showNum == '1'">
        <el-form-item label="储值卡号">
          <el-input v-model="dataForm.cardNum" placeholder="请输入储值卡号" @keyup.enter.native="getStoredInfo">
            <el-button slot="append" @click="getStoredInfo">查询</el-button>
          </el-input>
        </el-form-item>
      </div>
      <div v-if="showNum == '2'">
        <el-form-item label="储值卡号">
          <el-input v-model="dataForm.cardNum" placeholder="请输入储值卡号">
            <el-button slot="append">查询</el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="余额">
          <el-input v-model="dataForm.balance" readonly></el-input>
        </el-form-item>
        <el-form-item label="付费金额">
          <el-input v-model="dataForm.payAmount" @keyup.enter.native="paymentHandle"></el-input>
        </el-form-item>
      </div>
    </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" v-if="showNum == '1'" disabled>缴 费</el-button>
      <el-button type="primary" v-if="showNum == '2'" @click="paymentHandle">缴 费</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import { getValueStoredCard } from '@/api/eims/cashier/payment'

  export default {
    props:['saleDataList'],
    data() {
      return {
        visible: false,
        showNum: '',
        dataForm: {
          cardNum: '',
          balance: '',
          payAmount: ''
        }
      }
    },
    methods:{
      // 打开弹窗，初始化数据
      init(data){
        this.visible = true
        this.showNum = 1
      },
      getStoredInfo() {
        if(!this.dataForm.cardNum){
          this.$message.warning('请填写储值卡号')
          return
        }
        getValueStoredCard(this.dataForm.cardNum).then(result => {

					if(result.data.data){
						this.showNum = 2
						this.dataForm.balance = result.data.data.balance
					}else{
						this.$message.warning('请输入正确的卡号')
					}

        })
      },
      //  表单提交，缴费
      paymentHandle() {
        if(!this.dataForm.payAmount){
          this.$message.warning('付款金额不能为空')
          return
        }

        if(this.dataForm.payAmount > this.dataForm.balance){
          this.$message.warning('付款金额不能大于余额')
          return
        }
        this.visible = false
        this.$emit('refreshData',this.dataForm)
      }
    }
  }
</script>

<style lang="scss" scoped>
  table tr td {
    border: solid 1px red;
    padding: 3px 8px;
  }
</style>
